<template>
  <div id="dplayer" class="dplayer-height" @keypress.space="playOrPause"></div>
</template>

<script>
import DPlayer from '../../../node_modules/dplayer/dist/DPlayer.min'
import {getHttpPath} from '../../js/my-utils'
export default {
  name: 'DPlayer',
  props: ['message'],
  data () {
    return {
      player: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const player = {
        container: document.getElementById('dplayer'),
        autoplay: true,
        video: { // 视频源
          quality: [],
          defaultQuality: 0,
          pic: 'demo.png',
          // 缩略图 thumbnails.jpg
          thumbnails: ''
        },
        subtitle: { // 字幕
          url: 'webvtt.vtt'
        },
        danmaku: { // 弹幕
          id: '9E2E3368B56CDBB4',
          api: 'https://dplayer.moerats.com/v3/bilibili?cid=321808694',
          token: 'tokendemo',
          maximum: 50000,
          addition: ['https://api.prprpr.me/dplayer/v3/bilibili'],
          user: 'DIYgod',
          bottom: '15%',
          unlimited: true
        }
      }
      player.video.quality = this.message.quality
      player.video.thumbnails = this.message.thumbnails
      player.danmaku.addition = this.message.addition
      // player.danmaku.id = Math.random() * 1000
      if (this.message.quality.length === 0) {
        player.video.quality = [
          {name: '720P', url: getHttpPath('/video/error.mp4'), type: 'normal'}
        ]
        player.video.thumbnails = ''
        player.danmaku.addition = ''
      }
      if (this.player !== '') {
        this.player.destroy()
      }
      this.player = new DPlayer(player)
    },
    hideDanmu () {
      // 隐藏弹幕
      this.player.danmaku.hide()
    },
    showDanmu () {
      // 显示弹幕
      this.player.danmaku.show()
    },
    playOrPause () {
      // 播放/暂停
      this.player.toggle()
    },
    getCurrentTime () {
      // 当前播放时间
      return this.player.video.currentTime
    }
  }
}
</script>

<style scoped>
#dplayer {
  width: 100%;height: 500px;position: absolute;margin-left: -20px;
}
</style>
